<template>
	<view>
		<!-- :border="props.border||1" borderDirection="bottom" borderColor="gray-3" -->
		<view v-if="type === 'default'" :class="['ac-cell-view', 'h-90', 'px-18', 'rounded', props._class]"
			:style="[_style, props._style, { height: props.height + 'rpx' }]" @click="_onClick()">

			<slot name="leftIcon">
				<ac-icon :name="props.leftIcon" :size="props.leftIconSize" _class="mr-8"></ac-icon>
			</slot>

			<view class="flex-col flex-1 justify-around">
				<ac-text :font-size="props.titleFontSize" :label="props.title"></ac-text>
				<ac-text v-if="props.note" color="gray-5" fontSize="sm" :label="props.note"></ac-text>
			</view>

			<slot name="right" />
			<view v-if="props.rightText" class="w-360 flex-row justify-end">
				<ac-text v-if="props.rightText" :fontSize="props.rightTextSize" :color="props.rightTextColor"
					:label="props.rightText" _class="line-1"></ac-text>
			</view>

			<ac-icon v-if="props.showArrow" :name="props.rightIcon" :size="props.rightIconSize"
				:color="props.rightIconColor" _class="ml-2"></ac-icon>
		</view>
		<!-- v-if="type==='button'" -->
		<!--  btn-raw h-120 px-18 flex-row items-center rounded  -->
		<button v-else-if="type === 'button'" :class="['ac-cell-button', 'h-110', 'rounded', props._class]"
			:style="[_style, props._style]" :open-type="props.openType" @click="_onClick()">
			<ac-icon :name="props.leftIcon" :size="props.leftIconSize"></ac-icon>
			<view class="flex-col flex-1">
				<ac-text :label="props.title"></ac-text>
				<ac-text v-if="props.note" :label="props.note"></ac-text>
			</view>
			<slot name="right" />
			<ac-text v-if="props.rightText" fontSize="sm" :color="props.rightTextColor" :label="props.rightText"> </ac-text>
			<ac-icon v-if="props.showArrow" :color="props.rightIconColor" :name="props.rightIcon"
				:size="props.rightIconSize"></ac-icon>
		</button>
		<view v-else></view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { pub_props, computedColor, computedMarginPadding } from '@/uni_modules/ac-ui/utils/minxs/props';

const emits = defineEmits(['click']);

const props = defineProps({
	...pub_props,
	color: {
		type: String,
	},
	height: {
		type: Number,
		default: 92,
	},
	title: {
		type: String,
	},
	titleFontSize: {
		type: Number,
		default: 30,
	},
	line: {
		type: Number,
		default: 1,
	},
	border: {
		type: Number,
		default: 1,
	},
	borderColor: {
		type: String,
		default: 'gray-100',
	},
	borderDirection: {
		type: String,
		default: 'bottom',
	},
	type: {
		type: String,
		default: 'default',
	},
	openType: {
		type: String,
	},
	note: {
		type: String,
	},
	rightText: {
		type: String,
	},
	rightTextColor: {
		type: String,
		default: 'gray-400',
	},
	rightTextSize: {
		type: Number,
		default: 24,
	},
	// 图标相关
	leftIcon: {
		type: String,
	},
	leftIconColor: {
		type: String,
	},
	leftIconSize: {
		type: String,
		default: '46',
	},
	rightIcon: {
		type: String,
		default: 'arrowright',
	},
	rightIconColor: {
		type: String,
		default: 'gray-400',
	},
	rightIconSize: {
		type: String,
		default: '28',
	},
	// 是否显示箭头图标
	showArrow: {
		type: Boolean,
		default: true,
	},
	margin: {
		type: Array,
	},
	_class: {
		type: String,
		default: '',
	},
	_style: {
		type: String,
		default: '',
	},
	// 是否换行排列
	warp: {
		type: Boolean,
		default: true,
	},
});

const _style = computed(() => {
	let style = {};
	if (props.border) {
		let direction = props.borderDirection === 'all' ? '' : '-' + props.borderDirection;
		style[`border${direction}`] = `solid ${props.border}rpx`;
		style[`border${direction}-color`] = computedColor(props.borderColor, '', props.theme);
	}
	if (props.margin) {
		style['margin'] = computedMarginPadding(props.margin);
	}
	if (props.color && !props.linear) {
		style['background-color'] = computedColor(props.color, '', props.theme);
	}
	if (props.color && props.linear) {
		style['background-image'] = computedColor(props.color, '', props.theme);
	}
	return style;
});

function _onClick() {
	emits('click');
}
</script>

<style scoped>
.ac-cell-view {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: transparent;
	text-align: left;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.ac-cell-button {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 110rpx;
	padding-left: 24rpx;
	padding-right: 18rpx;
	background-color: transparent;
	text-align: left;
	padding-top: 18rpx;
	padding-bottom: 18rpx;
	border-radius: 12rpx;
}

.ac-cell-button:after {
	border-width: 0;
}
</style>
